
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>浏览页面</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
</head>
<body class="pear-container">

<!-- 顶部查询表单 -->


<!-- 数据表格 -->
<div class="layui-card">
    <div class="layui-card-body">
        <table id="data-table" lay-filter="data-table"></table>
    </div>
</div>

<!-- 表格行工具栏 -->
<script type="text/html" id="table-bar">
        </script>

<script type="text/html" id="createTime">
    {{# if(d.create_time>0){}}
    {{layui.util.toDateString(d.create_time+'000', 'yyyy-MM-dd HH:mm:ss')}}
    {{# } }}
</script>

<script type="text/html" id="updateTime">
    {{# if(d.update_time>0){}}
    {{layui.util.toDateString(d.update_time+'000', 'yyyy-MM-dd HH:mm:ss')}}
    {{# } }}
</script>

<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script src="/app/admin/admin/js/permission.js"></script>
<script src="/app/admin/admin/js/common.js"></script>

<script>

    // 相关常量
    const PRIMARY_KEY = "id";
    const SELECT_API = "/app/admin/rl-order-bill-details/select";

    // 表格渲染
    layui.use(["table", "form", "common", "popup", "util"], function() {
        let table = layui.table;

        // 表头参数
        let cols = [
            {
                title: "订单ID",align: "left",
                field: "order_id",
                width: '80',
            },{
                title: "订单号",align: "left",
                field: "order_sn",
                width: '200',
            },{
                title: "支付金额",align: "left",
                field: "order_amount",
                width: '200',
            },{
                title: "结算金额",align: "left",
                field: "settlement_amount",
                width: '200',
            },{
                title: "佣金金额",align: "left",
                field: "commission_amount",
                width: '200',
            },{
                title: "创建时间",align: "left",
                field: "create_time",
                width: '200',
                templet: '#createTime',
            },{
                title: "更新时间",align: "left",
                field: "update_time",
                width: '200',
                templet: '#updateTime',
            },{
                title: "操作",
                toolbar: "#table-bar",
                align: "center",
                fixed: "right",
                width: 120,
            }
        ];

        // 渲染表格
        table.render({
            elem: "#data-table",
            url: SELECT_API,
            type: "post",
            page: true,
            cols: [cols],
            skin: "line",
            size: "lg",
            toolbar: "#table-toolbar",
            autoSort: false,
            defaultToolbar: [{
                title: "刷新",
                layEvent: "refresh",
                icon: "layui-icon-refresh",
            }, "filter", "print", "exports"],
            done: function () {
                layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
            }
        });

        // 表格排序事件
        table.on("sort(data-table)", function(obj){
            table.reload("data-table", {
                initSort: obj,
                scrollPos: "fixed",
                where: {
                    field: obj.field,
                    order: obj.type
                }
            });
        });

        // 刷新表格数据
        window.refreshTable = function(param) {
            table.reloadData("data-table", {
                scrollPos: "fixed"
            });
        }
    })

</script>
</body>
</html>
